<template>
  <a-drawer title="角色用户列表" :width="screenWidth" @close="onClose" :visible="visible" v-if="visible">
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="24">
            <a-col :md="12" :sm="12">
              <a-form-item label="">
                <a-input placeholder="用户账号" v-model="queryParam.userName" style="width: 200px"></a-input>
              </a-form-item>
            </a-col>
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
            <a-col :md="9" :sm="24">
             <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 21px">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </a-col>
          </span>
          </a-row>
        </a-form>
      </div>
      <div class="page_table">
        <vxe-grid
          ref="xGrid"
          :border="true"
          :resizable="true"
          :showOverflow="true"
          size="mini"
          :loading="loading"
          :height="pageHeight-seachHeight-110"
          :align="left"
          :columns="columns"
          :data="dataSource"
          :toolbar-config="tableToolbar"
          :checkbox-config="checkboxConfig"
          v-bind="vexConfig"
          @checkbox-change="selectChangeEvent"
          @checkbox-all="selectChangeEvent"
        >
          <template #toolbar_buttons>
            <div class="table-operator">
              <a-button @click="handleAdd(searchOn.roleCode)" type="primary">添加用户</a-button>
            </div>
          </template>
          <template #status="{row}">
            {{ row.status == 1 ? '启用' : '停用' }}
          </template>
          <template #action="{ row:record }">
<!--            <a @click="handleEdit(record)">编辑</a>-->
<!--            <a-divider type="vertical"/>-->
            <a-popconfirm title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a>删除</a>
            </a-popconfirm>
          </template>
          <template #pager>
            <vxe-pager
              :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']"
              :currentPage.sync="ipagination.current"
              :page-size.sync="ipagination.pageSize"
              :total="ipagination.total"
              :pageSizes="ipagination.pageSizeOptions"
              @page-change="handlePageChange">
            </vxe-pager>
          </template>
        </vxe-grid>
      </div>
      <user-modal ref="modalForm2" @ok="saveUserRelation"></user-modal>
      <SelectUserModal ref="selectUserModal" @selectFinished="selectOK"></SelectUserModal>
      <!-- 字典数据 -->
    </a-card>
  </a-drawer>
</template>

<script>
import { PageListMixin } from '@/mixins/PageListMixin'
import SelectUserModal from '@page-modules/SelectUserModal'
import UserModal from '@page-modules/RoleDrawerModal'
import { getAction, postAction } from '@api/manage'

export default {
  name: 'DictItemList',
  mixins: [PageListMixin],
  components: { SelectUserModal,UserModal },
  data() {
    return {
      dataSource:[],
      columns: [
        { type: 'checkbox', width: 50, fixed: 'left' },
        {
          title: '用户账号',
          field: 'userName',
          minWidth: 100
        }, {
          title: '用户名称',
          minWidth: 100,
          field: 'realName'
        }, {
          title: '状态',
          minWidth: 100,
          field: 'status',
          slots: { default: 'status' }
        }, , {
          title: '操作',
          field: 'action',
          slots: { default: 'action' },
          minWidth: 120
        }],
      queryParam: {},
      title: '操作',
      visible: false,
      screenWidth: 800,
      model: {},
      dictCode: '',
      status: 1,
      labelCol: {
        xs: { span: 5 },
        sm: { span: 5 }
      },
      wrapperCol: {
        xs: { span: 12 },
        sm: { span: 12 }
      },
      form: this.$form.createForm(this),
      validatorRules: {
        dictDataDesc: { rules: [{ required: true, message: '' }] },
        dictDataCode: { rules: [{ required: true, message: '' }] }
      },
      currentRoleId:'',
      url: {
        list: window._CONFIG['domianURL'] + '/cnUserRoleController/findUserRoleList',
        delete: window._CONFIG['domianURL'] + '/cnUserRoleController/deleteUserRole',
        deleteBatch: '/sys/dictItem/deleteBatch',
        addUserRole: window._CONFIG['domianURL'] + '/cnRoleController/addSysUserRole',
      }
    }
  },
  created() {
    // 当页面初始化时,根据屏幕大小来给抽屉设置宽度
    this.resetScreenSize()
  },
  methods: {
    add() {
      this.edit({})
    },
    edit(row) {
      this.currentRoleId = row.id
      this.searchOn.roleCode = row.roleCode
      this.visible = true
      this.loadData()
    },

    showDrawer() {
      this.visible = true
    },
    handleConfig(record, type, modal = 'ConfigModal') {
      // this.$refs.modalForm2.roleDisabled = true
      return false
    },
    handleAdd(record) {
      if (this.currentRoleId== '') {
        this.$message.error('请选择一个角色!')
      } else {
        this.$refs.modalForm2.roleDisabled = true
        this.$refs.modalForm2.selectedRole = [ this.currentRoleId ]
        this.$refs.modalForm2.title = '用户配置'
        this.$refs.modalForm2.showModal(record)
        this.$refs.modalForm2.usersData = this.dataSource
      }
    },

    saveUserRelation() {
      this.searchQuery()
    },
    handleAddUserRole() {
      if (this.currentRoleId == '') {
        this.$message.error('请选择一个角色!')
      } else {
        this.$refs.selectUserModal.isfilterRole = 1
        this.$refs.selectUserModal.visible = true
        this.$refs.selectUserModal.roleCode = this.searchOn.roleCode
      }
    },
    handleDelete: function (id) {
      if (!this.url.delete) {
        this.$message.error('请设置url.delete2属性!')
        return
      }
      var that = this
      getAction(that.url.delete, { roleId: this.currentRoleId, userId: id }).then((res) => {
        if (res.success) {
          that.$message.success(res.message)
          that.loadData()
        } else {
          that.$message.warning(res.message)
        }
      })
    },
    selectOK(data) {
      let params = {}
      params.roleCode = this.currentRoleId
      params.items = []
      for (var a = 0; a < data.length; a++) {
        params.items.push(data[a].userName)
      }
      postAction(this.url.addUserRole, params).then((res) => {
        if (res.success) {
          this.loadData()
          this.$message.success(res.message)
        } else {
          this.$message.warning(res.message)
        }
      })
    },
    handleEdit: function (record) {
      this.$refs.modalForm2.title = '编辑'
      this.$refs.modalForm2.roleDisabled = true
      this.$refs.modalForm2.edit(record)
    },
    handleDetail: function (record) {
      this.$refs.modalForm2.title = '详情'
      this.$refs.modalForm2.roleDisabled = false
      this.$refs.modalForm2.edit(record)
    },
    onClose() {
      this.visible = false
      this.form.resetFields()
      this.dataSource = []
      this.searchOn = []
    },
    // 抽屉的宽度随着屏幕大小来改变
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 600) {
        this.screenWidth = screenWidth
      } else {
        this.screenWidth = 800
      }
    }
  }
}
</script>
<style scoped>
.table-operator{
  background-color: #fff;
}
/deep/ .vxe-toolbar{
  background-color: #fff !important;
}
</style>
